<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轻松一刻 - 动态风景</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: linear-gradient(to bottom, #87CEEB, #E0F7FF);
            font-family: "Microsoft YaHei", sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        canvas {
            display: block;
            max-width: 100%;
            max-height: 100%;
        }
        .container {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .message {
            position: absolute;
            top: 20px;
            left: 0;
            width: 100%;
            text-align: center;
            color: white;
            font-size: 18px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            z-index: 10;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="message">轻松一刻 · 动态风景</div>
        <canvas id="landscape"></canvas>
    </div>

    <script>
        const canvas = document.getElementById('landscape');
        const ctx = canvas.getContext('2d');
        
        // 设置画布尺寸
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        // 云朵类
        class Cloud {
            constructor(x, y, size, speed) {
                this.x = x;
                this.y = y;
                this.size = size;
                this.speed = speed;
                this.opacity = 0.7 + Math.random() * 0.3;
            }
            
            update() {
                this.x += this.speed;
                if (this.x > canvas.width + this.size * 100) {
                    this.x = -this.size * 100;
                }
            }
            
            draw() {
                ctx.save();
                ctx.globalAlpha = this.opacity;
                ctx.fillStyle = '#ffffff';
                
                // 绘制云朵形状
                for (let i = 0; i < 3; i++) {
                    ctx.beginPath();
                    ctx.arc(
                        this.x + i * this.size * 20,
                        this.y,
                        this.size * 15 + i * 5,
                        0,
                        Math.PI * 2
                    );
                    ctx.fill();
                }
                
                for (let i = 0; i < 2; i++) {
                    ctx.beginPath();
                    ctx.arc(
                        this.x + this.size * 20 + i * this.size * 15,
                        this.y - this.size * 10,
                        this.size * 12 + i * 3,
                        0,
                        Math.PI * 2
                    );
                    ctx.fill();
                }
                
                ctx.restore();
            }
        }

        // 草地类
        class Grass {
            constructor(x, baseY, height, waveSpeed, waveAmplitude) {
                this.x = x;
                this.baseY = baseY;
                this.height = height;
                this.waveSpeed = waveSpeed;
                this.waveAmplitude = waveAmplitude;
                this.time = Math.random() * Math.PI * 2;
            }
            
            update(deltaTime) {
                this.time += this.waveSpeed * deltaTime;
            }
            
            draw() {
                const sway = Math.sin(this.time) * this.waveAmplitude;
                
                ctx.beginPath();
                ctx.moveTo(this.x, this.baseY);
                ctx.quadraticCurveTo(
                    this.x + sway,
                    this.baseY - this.height / 2,
                    this.x + sway * 2,
                    this.baseY - this.height
                );
                
                ctx.strokeStyle = '#2d5a2d';
                ctx.lineWidth = 2;
                ctx.stroke();
                
                // 添加草叶顶部
                ctx.beginPath();
                ctx.arc(this.x + sway * 2, this.baseY - this.height, 2, 0, Math.PI * 2);
                ctx.fillStyle = '#3a7a3a';
                ctx.fill();
            }
        }

        // 初始化云朵
        const clouds = [];
        for (let i = 0; i < 5; i++) {
            clouds.push(new Cloud(
                Math.random() * canvas.width,
                50 + Math.random() * 150,
                0.5 + Math.random() * 0.5,
                0.2 + Math.random() * 0.3
            ));
        }

        // 初始化草地
        const grasses = [];
        const grassBaseY = canvas.height * 0.7;
        for (let i = 0; i < canvas.width; i += 3) {
            grasses.push(new Grass(
                i,
                grassBaseY + Math.random() * 50,
                30 + Math.random() * 40,
                0.5 + Math.random() * 0.5,
                3 + Math.random() * 5
            ));
        }

        // 动画循环
        let lastTime = 0;
        function animate(currentTime) {
            const deltaTime = (currentTime - lastTime) / 1000;
            lastTime = currentTime;

            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制天空渐变
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, '#87CEEB');
            gradient.addColorStop(0.7, '#E0F7FF');
            gradient.addColorStop(1, '#ffffff');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 绘制太阳
            ctx.beginPath();
            ctx.arc(canvas.width * 0.8, canvas.height * 0.2, 40, 0, Math.PI * 2);
            ctx.fillStyle = '#FFD700';
            ctx.fill();
            
            // 太阳光晕
            ctx.beginPath();
            ctx.arc(canvas.width * 0.8, canvas.height * 0.2, 60, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(255, 215, 0, 0.3)';
            ctx.fill();

            // 更新和绘制云朵
            clouds.forEach(cloud => {
                cloud.update();
                cloud.draw();
            });

            // 绘制地面
            ctx.fillStyle = '#8B7355';
            ctx.fillRect(0, grassBaseY, canvas.width, canvas.height - grassBaseY);

            // 绘制草地底色
            ctx.fillStyle = '#4a7c4a';
            ctx.fillRect(0, grassBaseY - 20, canvas.width, 30);

            // 更新和绘制草地
            grasses.forEach(grass => {
                grass.update(deltaTime);
                grass.draw();
            });

            // 绘制远山轮廓
            ctx.fillStyle = '#6B8E6B';
            ctx.beginPath();
            ctx.moveTo(0, grassBaseY - 50);
            for (let x = 0; x <= canvas.width; x += 50) {
                const height = 30 + Math.sin(x * 0.01) * 20;
                ctx.lineTo(x, grassBaseY - 50 - height);
            }
            ctx.lineTo(canvas.width, grassBaseY);
            ctx.lineTo(0, grassBaseY);
            ctx.fill();

            requestAnimationFrame(animate);
        }

        // 启动动画
        animate(0);
    </script>
</body>
</html>
